<template>
  <div>
    <BaseInputText
        v-model="newTodoText"
        placeholder="New todo"
        @keydown.enter="addTodo"
    />
    <ul v-if="todos.length">
      <TodoListItem
          v-for="todo in todos"
          :key="todo.id"
          :todo="todo"
          @remove="removeTodo"
      />
    </ul>
    <p v-else>
      Nothing left in the list. Add a new todo in the input above.
    </p>
    <van-button type="primary" @click="view">查看</van-button>
  </div>
</template>

<script>
  import { Button } from 'vant'
  import BaseInputText from './BaseInputText.vue'
  import TodoListItem from './TodoListItem.vue'

  let nextTodoId = 1

  export default {
    components: {
      BaseInputText, TodoListItem,
      'van-button': Button
    },
    data() {
      return {
        newTodoText: '',
        todos: [
          {
            id: nextTodoId++,
            text: 'Learn Vue'
          },
          {
            id: nextTodoId++,
            text: 'Learn about single-file components'
          },
          {
            id: nextTodoId++,
            text: 'Fall in love'
          }
        ]
      }
    },
    methods: {
      addTodo() {
        const trimmedText = this.newTodoText.trim()
        if (trimmedText) {
          this.todos.push({
            id: nextTodoId++,
            text: trimmedText
          })
          this.newTodoText = ''
        }
      },
      removeTodo(idToRemove) {
        this.todos = this.todos.filter(todo => {
          return todo.id !== idToRemove
        })
      },
      view(){
        this.$router.push({path:'/home'})
      }
    }
  }
</script>
